import React from 'react';
import { Layout, Menu, Dropdown, message, Space } from 'antd';
import { Routes, Route, Link, Router } from "react-router-dom"
import '../assets/home.css'
import type { MenuProps } from 'antd';
import ShortVideo from './ShotrVidoe/ShortVideo'
import MusciList from './MusciList/MusciList';
import SearchPage from './SearchPage/SearchPage';
import Wallpaper from './Wallpaper/Wallpaper';
import { UploadOutlined, UserOutlined, VideoCameraOutlined, TranslationOutlined, DownOutlined } from '@ant-design/icons';
const { Header, Content, Footer, Sider } = Layout;
const onClick: MenuProps['onClick'] = ({ key }) => {
    message.info(`Click on item ${key}`);
};

const navList = [
    { name: '搜索', router: '/SearchPage', icon: UserOutlined, },
    { name: '列表', router: '/MusciList', icon: VideoCameraOutlined },
    { name: '短视频', router: '/ShortVideo', icon: UploadOutlined },
    { name: '壁纸', router: '/Wallpaper', icon: UserOutlined },
]
const menu = (
    <Menu
        onClick={onClick}
        items={[
            {
                label: '简体中文',
                key: '1',
            },
            {
                label: '繁体中文',
                key: '2',
            },
            {
                label: 'English',
                key: '3',
            },
        ]}
    />
);
const Home = () => (
    <Layout
        className='homePage'
    >
        <Sider
            className='homeSider'
            style={{ backgroundColor: 'white', }}
            breakpoint="lg"
            collapsedWidth="0"
            onBreakpoint={(broken) => {
                console.log(broken);
            }}
            onCollapse={(collapsed, type) => {
                console.log(collapsed, type);
            }}
        >
            <div className="logo">TONAKYO</div>
            {navList.map((item,index)=>{
                return <li className='siderList'><Link to ={item.router} className="siderToRouter"><span className='siderIcon'>{React.createElement(item.icon)}</span>{item.name}</Link></li>
            })}
        </Sider>
        <Layout>
            <Header
                className="site-layout-sub-header-background"
                style={{
                    padding: 0,
                    paddingRight: 20,
                    backgroundColor: 'white',
                    textAlign: 'right',
                    display: 'flex',
                }}
            >

                <div style={{ flex: 1, textAlign: 'center', fontSize: 24, fontWeight: 'border' }}>TONAKYO MUSIC</div>
                <Dropdown overlay={menu}>
                    <a onClick={e => e.preventDefault()}>
                        <Space>
                            <TranslationOutlined />
                            <DownOutlined />
                        </Space>
                    </a>
                </Dropdown>
            </Header>
            <Content
                style={{
                    margin: '10px 10px 0',
                    backgroundColor: 'white'
                }}
            >
                <div
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        minHeight: 360,
                        backgroundColor: 'white'
                    }}
                >
                   <Routes>
                   {/* MusciList SearchPage Wallpaper*/}
                        <Route path='/shortVideo' element={<ShortVideo/>}></Route>
                        <Route path='/musciList' element={<MusciList/>}></Route>
                        <Route path='/searchPage' element={<SearchPage/>}></Route>
                        <Route path='/wallpaper' element={<Wallpaper/>}></Route>
                   </Routes>
                </div>
            </Content>
            <Footer
                style={{
                    textAlign: 'center',
                    backgroundColor: 'white'
                }}
            >
                Ant Design ©2018 Created by Ant UED
            </Footer>
        </Layout>
    </Layout>
);

export default Home;